JS - element properties - outerText

revision:


sets or returns the outer text content of a node.

top

The property sets or returns the text content of the specified node and its descendants.
This property is similar to the "innerText property"; in fact getting the outerText returns the same result as getting the innerText property.
There is an important difference when setting an element's outerText, because the element itself is removed.

Syntax:

node.outerText : returns the text content of a node: a string, representing the text content of a node and all its descendants.

node.outerText = text : sets the text content of a node (replacing the entire node).

property value:

text : string - specifies the text content to insert

example

Set outertext

When setting the outerText, the entire element gets replaced.

Click the button to change (and remove) the h5 element:

            <div>
                <h5>Set outertext</h5>
                <p>When setting the outerText, the entire element gets replaced.</p>
                <p>Click the button to change (and remove) the h5 element:</p>
                <button onclick="firstFunction()">Change Header</button>
            </div>
            <script>
                function firstFunction() {
                    const x = document.getElementsByTagName("h5")[0];
                    x.outerText = "Changed content!";
                }
            </script>